<md-tab-group (selectChange)="onTabChanged($event)" style="height: 100%;">
  <md-tab label="Local">
    <div style="padding: 10px 10px 0 10px;">
      <md-input-container style="width: 100%;">
        <input mdInput #localFilterName name="name" placeholder="Name" i18n-placeholder="name" (keyup.enter)="onRefreshLocal(localFilterName.value)">
        <md-icon mdPrefix>search</md-icon>
      </md-input-container>
    </div>
    <div fxLayout fxLayoutWrap fxFlex="100" class="images-list">
      <div fxFlex.xs="100" fxFlex.sm="50" fxFlex.gt-sm="33.3333" fxFlex.lg="25" *ngFor="let item of images; let i = index" [attr.title]="item.RepoTags.join(', ')">
        <md-card>
          <md-card-subtitle>
            <div fxLayout="row" fxLayoutAlign="space-between end">
              <span>{{item.RepoTags.join(", ")}}</span>
            </div>
            <div fxLayout="row" fxLayoutAlign="space-between end">
              <span>{{item.Created * 1000 | date:'medium'}}</span>
              <span>{{item.Size | length}}</span>
            </div>
          </md-card-subtitle>

          <md-card-actions fxLayout="row" fxLayoutAlign="center end">
            <button md-icon-button i18n-title title="Create Container" (click)="onCreateContainer(item)">
              <md-icon>add</md-icon>
            </button>
            <button md-icon-button i18n-title="tag" title="Tag" (click)="onTag(item)">
              <md-icon>book</md-icon>
            </button>
            <button md-icon-button i18n-title="export" title="Export" (click)="onExport(item)">
              <md-icon>vertical_align_bottom</md-icon>
            </button>
            <button md-icon-button i18n-title="remove" title="Remove" (click)="onRemove(item, i)">
              <md-icon>delete_sweep</md-icon>
            </button>
          </md-card-actions>
        </md-card>

        <layer *ngIf="item.State" [height]="128"></layer>
      </div>
    </div>

  </md-tab>

  <md-tab label="Docker Hub">
    <div style="padding: 10px 10px 0 10px;">
      <md-input-container style="width: 100%;">
        <input mdInput #remoteFilterName name="name" i18n-placeholder="name" placeholder="Name" (keyup.enter)="onSearch({'term': remoteFilterName.value})">
        <md-icon mdPrefix>search</md-icon>
      </md-input-container>
    </div>
    <div fxLayout fxLayoutWrap fxFlex="100" class="images-list">
      <div fxFlex.xs="100" fxFlex.sm="50" fxFlex.gt-sm="33.3333" fxFlex.gt-lg="25" *ngFor="let item of remoteImages; let i = index"
        [attr.title]="item.name">
        <md-card>
          <md-card-subtitle>
            <div fxLayout="row" fxLayoutAlign="space-between end">
              <span style="line-height: 32px;">{{item.name}}</span>
              <md-chip-list *ngIf="item.is_official">
                <md-chip color="primary" selected="true">official</md-chip>
              </md-chip-list>
            </div>
            <div fxLayout="row" fxLayoutAlign="space-between end">
              <button style="text-align: left; padding: 0px;" md-button [disabled]='true'><md-icon>favorite_border</md-icon>{{item.star_count}}</button>
              <span title="Automated" *ngIf="item.is_automated"><md-icon>autorenew</md-icon></span>
            </div>

            <div fxLayout="row" fxLayoutAlign="space-between end" title="{{item.description}}">
              <span>{{item.description}}</span>
            </div>

          </md-card-subtitle>

          <md-card-actions fxLayout="row" fxLayoutAlign="center end">
            <button md-icon-button i18n-title title="Pull Image" (click)="onPull(item)">
              <md-icon>get_app</md-icon>
            </button>
          </md-card-actions>
        </md-card>

        <layer *ngIf="item.State" [height]="180"></layer>
      </div>
    </div>
  </md-tab>
</md-tab-group>


<button title="Refresh" i18n-title="refresh" [hidden]="!local" style="position: fixed; z-index: 2; right: 5px; bottom: 60px;" md-mini-fab (click)="onRefreshLocal()">
  <md-icon>refresh</md-icon>
</button>

<button title="Import" i18n-title="import" [hidden]="!local" style="position: fixed; z-index: 2; right: 5px; bottom: 10px;" md-mini-fab (click)="onImport()">
  <md-icon>vertical_align_top</md-icon>
</button>
